<template>
  <div id="app">
    <!-- 搜索框 -->
    <Search></Search>
    <!-- 轮播图 -->
    <swiper></swiper>
    <!-- 列表 -->
    <List :shopList="shopList" :titleList="titleList" :sortList="sortList"></List>
    <!-- Tabber：底部按钮 -->
    <Tabbar></Tabbar>
  </div>
</template>

<script>
// 导入axios
import axios from 'axios'
// 导入组件
import Search from './components/Search.vue'
import Swiper from './components/Swiper.vue'
import List from './components/List.vue'
import Tabbar from './components/Tabbar.vue'

export default {
    components:{//负责注册组件( 局部组件 , 只能在当前注册的文件中使用 )
    Search,
    Swiper,
    List,
    Tabbar
  },

  data(){
    return{
      sortList:["综合排序","距离最近","销量最高","筛选"],
      titleList:["年货节热卖","津贴联盟","满减优惠","品质联盟"],
      // 模拟店铺数据
      shopList:[]
    }
  },
  // 挂载完成
  mounted(){//这个方法会在组件挂载完成时 自动执行, 而且只执行一次
    axios.get('/api/shop/list').then((res)=>{
      // console.log(res)
      this.shopList = res.data.list
      console.log(this.shopList)
    })
  },
}
</script>

<style>
  *{
    margin: 0;padding: 0;
  }
</style>
